<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <link rel="stylesheet" type="text/css" href="css/grail_layout.css"/>
</head>
<body>

 <!--头部-->
 <div class="header">
    我是头
 </div>
    
 <!--中间内容-->
 <div class="atricle">

    <!--中间-->
    <div class="middle">
            我是中间
    </div>

    <!--左边-->
    <div class="left">
        我是左边
    </div>

    <!--右边-->
    <div class="right">
        我是右边
    </div>

 </div> 

<!--底部，页尾-->
 <div class="footer">
    版权版权所有©
 </div>

</body>
</html>